<template>
    <div id="guessdetails">
        <header>
            <h6>
                <img src="//common-1253410441.file.myqcloud.com/activityimg/20180201141148.png" alt=""><span>竞猜情况</span>
            </h6>
            <table>
                <thead>
                <tr>
                    <td class="hd110">期次</td>
                    <td>当期奖池</td>
                    <td>猜中人数</td>
                    <td>奖金</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>第{{issueNo||'--'}}期</td>
                    <td>{{jackpot||'--'}}元</td>
                    <td>{{[state , winJoinerCounts]|getnumv}}人</td>
                    <td><b>{{[state , joinerAvgWinMoney]|getnumv}}</b>元</td>
                </tr>
                </tbody>
                <tfoot v-if="selfJoiner">
                <tr>
                    <td colSpan="4">我的竞猜：{{selfJoiner.score|replaceseven}} ({{[state,selfJoiner.state]|getstate}})</td>
                </tr>
                </tfoot>
            </table>
        </header>
        <div class="container">
            <p class="datawin">{{matchTime}} {{weekNo}}</p>
            <span class="endtime">{{deadline}} 截止</span>
            <img :src="homeLogo||'//common-1253410441.file.myqcloud.com/activityimg/20180202115731.png'"
                 class="leftteam teamimg"
                 alt="">
            <img :src="visitorLogo||'//common-1253410441.file.myqcloud.com/activityimg/20180202115731.png'"
                 class="rightteam teamimg"
                 alt="">
            <span class="leftteamname spantname">{{home}}</span>
            <span class="rightteamname spantname">{{visitor}}</span>
            <p class="selectfen">
                <span class="leftteamfen">
                    {{[state ,hscore]|overscroe}}
                </span>
                <span class="rightteamfen">
                    {{[state ,vscore]|overscroe}}
                </span>
            </p>
            <img src="//common-1253410441.file.myqcloud.com/activityimg/20180201133557.png" alt="">
        </div>
        <footer>
            <section class="winlist">
                <scroller
                        :on-refresh="refresh"
                        :on-infinite="infinite">
                    <ul class="clearfix">
                        <li v-for="(item,index) in awards" :key="index">
                            <img :src="item.avatar||'//common-1253410441.file.myqcloud.com/activityimg/20180202115731.png'"
                                 alt="">
                            <span>
                                <strong>{{item.nick}}</strong>
                                <em>中<b>{{item.wonMoney}}</b>元</em>
                            </span>
                        </li>
                    </ul>
                </scroller>
            </section>
        </footer>

    </div>
</template>

<script>
    import {Marquee, MarqueeItem, Toast, Tab, TabItem, Sticky, dateFormat} from 'vux';
    import {getMytoken, getLogintoken} from '../../services/common';
    import {nativetonative, h5tonative} from '../../utils/otherfn';
    import {guessInfoR, sendGussR, winsortR} from '../../services/huodong/guess';
    import {namesource, jumptype} from '../../utils/config/common';
    import axios from 'axios';
    import {delay} from '../../utils/common';
    import {concat, head} from 'ramda';
    export default {
        components: {
            Marquee,
            MarqueeItem,
            Toast,
            Tab,
            TabItem,
            Sticky
        },
        data() {
            return {
                awards: [],
                winpage: 0,
                hscore: '--',
                vscore: '--',
                scroes: ['0', '1', '2', '3', '4', '5', '6', '7+'],
                deadline: '',
                home: '',
                homeLogo: '',
                issueNo: '',
                jackpot: '',
                joinerAvgWinMoney: '',
                joinerCounts: '',
                joinerWinMoney: '',
                score: ':',
                selfJoiner: null,
                state: '',
                visitor: '',
                visitorLogo: '',
                winJoinerCounts: '',
                showmodal: false,
                errmsg: '',
                matchTime: '',
                weekNo: ''
            };
        },
        created() {
            this.id = this.$route.params.id;
            this.getinfo(this.id);
        },
        filters: {
            replaceseven(val){
                return val.replace(/7/g, '7+');
            },
            overscroe([state,score]){
                if(state === -2) {
                    return '--'
                }
                return score;
            },
            getnumv([state,val]){
                if(state === -2) {
                    return '0'
                }
                if([1, 2, 3].indexOf(state) > -1) {
                    return '--'
                }
                return val;
            },
            getstate([state,mystate]){
                if(state === -2) {
                    return '取消'
                }
                switch (mystate) {
                    case 0:
                        return '待开';
                        break;
                    case 1:
                        return '猜中';
                        break;
                    case 2:
                        return '未中';
                        break;
                }
            }
        },
        computed: {
            getState(){
                const {state, selfJoiner}=this;
                if(state === 1) {
                    return 'doing'
                }
                if([-2, 2, 3, 4].indexOf(state) > -1) {
                    if(selfJoiner) {
                        if(selfJoiner.state === 1) {
                            return 'win';
                        }
                        else {
                            return 'lose'
                        }
                    }
                }
                return 'over'
            },
            middletips(){
                const {state, score, deadline}=this;
                if(state === 4) {
                    return `赛果比分 ${score}`
                }
                return `${deadline} 截止竞猜`
            }
        },
        methods: {
            /**
             * 获取一些初始化信息
             */
            jumpfn(name, url){
                const jumpurl = `${location.origin}/#${url}`;
                h5tonative(name, jumpurl, ()=> {
                    location.href = jumpurl;
                });
            },
            async getwinlist(page, loadermore){
                const {token}=await getMytoken(true);
                const {id}=this;
                const {data}=await winsortR(id, page);
                if(data && data.code === 0) {
                    if(loadermore) {
                        if(data.data.awards.length === 0) {
                            return true;
                        }
                        else {
                            this.awards = concat(this.awards, data.data.awards);
                        }
                    }
                    else {
                        this.winpage = 1;
                        this.awards = data.data.awards;
                    }
                }
            },
            async refresh(done){
                await delay(1000);
                this.winpage = 1;
                await this.getwinlist(1);
                done();
            },
            async infinite(done){
                await delay(1000);
                this.winpage = this.winpage + 1;
                const over = await this.getwinlist(this.winpage, true);
                if(over) {
                    this.winpage = this.winpage - 1;
                    done(true);
                    return;
                }
                done();
            },
            async getinfo(id){
                const {token}=await getMytoken(true);
                const {data}=await guessInfoR(token, id);
                if(data && data.code === 0) {
                    const {
                            deadline,
                            home,
                            homeLogo,
                            issueNo,
                            jackpot,
                            joinerAvgWinMoney,
                            joinerCounts,
                            joinerWinMoney,
                            score,
                            selfJoiner,
                            state,
                            visitor,
                            visitorLogo,
                            winJoinerCount,
                            matchTime,
                            weekNo,
                            winJoinerCounts
                    }=data.data;
                    this.deadline = deadline;
                    this.home = home;
                    this.homeLogo = homeLogo;
                    this.issueNo = issueNo;
                    this.jackpot = jackpot;
                    this.joinerAvgWinMoney = joinerAvgWinMoney;
                    this.joinerCounts = joinerCounts;
                    this.joinerWinMoney = joinerWinMoney;
                    this.score = score;
                    this.selfJoiner = selfJoiner;
                    this.state = state;
                    this.visitor = visitor;
                    this.visitorLogo = visitorLogo;
                    this.winJoinerCount = winJoinerCount;
                    this.id = id;
                    this.matchTime = matchTime;
                    this.weekNo = weekNo;
                    if(this.score) {
                        const hscore = this.score.split(":")[0];
                        const vscore = this.score.split(":")[1];
                        this.hscore = hscore || '-';
                        this.vscore = vscore || '-';
                    }
                    this.winJoinerCounts = winJoinerCounts;
                }
            },
            openmodal(){
                this.showmodal = true;
                this.errmsg = '';
            },
            emsurefn(){
                this.errmsg === '' ? this.sendmyguess() : this.showmodal = false;
            },
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    #guessdetails {
        img {
            display: block;
            width: 100%;
        }
        header {
            background: #fff;
            padding-bottom: 45px;
            h6 {
                height: 100px;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    width: 41px;
                    height: 43px;
                    margin-right: 20px;
                }
                span {
                    font-size: 30px;
                    font-weight: bold;
                }
            }
            table {
                table-layout: fixed;
                width: 700px;
                margin: 0 auto;
                font-size: 28px;
                border: 1px solid #e6e6e6;
                td {
                    text-align: center;
                }
                thead {
                    background: #f2f2f2;
                    td {
                        height: 58px;
                        color: #999;
                    }
                }
                tbody {
                    td {
                        height: 110px;
                    }
                }
                tfoot {
                    td {
                        text-align: left;
                        height: 58px;
                        text-indent: 30px;
                        position: relative;
                        &::before {
                            position: absolute;
                            content: ' ';
                            width: 90%;
                            top: 0;
                            border-top: 1px solid #e6e6e6;
                        }
                    }
                }
            }
        }
        .container {
            position: relative;
            .headleftbtn {
                position: absolute;
                top: 0;
                right: 0;
                height: 55px;
                width: 330px;
                i {
                    width: 160px;
                    height: 55px;
                    display: inline-block;
                }
            }
            .moneyshow {
                color: #fcff00;
                font-size: 32px;
                position: absolute;
                top: 122px;
                left: 420px;
                font-weight: bold;
                b {
                    font-size: 20px;
                    color: #fff;
                    font-weight: bold;
                }
            }
            .datawin {
                position: absolute;
                font-size: 28px;
                text-align: center;
                top: 54px;
                color: #fff;
                font-weight: bold;
                width: 100%;
            }
            .endtime {
                position: absolute;
                font-size: 26px;
                color: #fff;
                width: 100%;
                top: 260px;
                font-weight: bold;
                text-align: center;
            }
            .selectfen {
                position: absolute;
                top: 170px;
                width: 366px;
                left: 50%;
                transform: translate(-50%, 0);
                span {
                    appearance: none;
                    width: 157px;
                    background: none;
                    display: inline-block;
                    box-sizing: border-box;
                    margin-left: 40px;
                    text-align: center;
                    font-size: 40px;
                    font-weight: bold;
                    &:first-child {
                        margin-left: 0;
                    }
                }
            }
            .spantname {
                font-size: 30px;
                font-weight: bold;
                color: #fff;
                line-height: 54px;
                position: absolute;
                width: 251px;
                top: 348px;

            }
            .leftteamname {
                left: 60px;
            }
            .rightteamname {
                right: 60px;
                text-align: right;
            }
            .teamimg {
                position: absolute;
                width: 90px;
                height: 90px;
                border-radius: 50%;
                top: 174px;
            }
            .leftteam {
                left: 68px;
            }
            .rightteam {
                right: 68px;
            }
        }
        footer {
            min-height: 600px;
            background: url(//common-1253410441.file.myqcloud.com/activityimg/20180201133718.png) top center;
            background-size: contain;
            position: relative;
            .winlist {
                padding: 0 20px;
                position: absolute;
                width: 625px;
                top: 0;
                left: 50%;
                transform: translate(-50%, 0);
                height: 80%;
                ul {
                    display: block;
                    overflow: scroll;
                    max-height: 880px;
                    li {
                        width: 300px;
                        height: 62px;
                        float: left;
                        display: flex;
                        background: #142a40;
                        border-radius: 8px;
                        margin-bottom: 20px;
                        align-items: center;
                        &:nth-child(2n) {
                            margin-left: 25px;
                        }
                        img {
                            width: 52px;
                            height: 52px;
                            box-sizing: border-box;
                            border: 2px solid #ccc;
                            border-radius: 50%;
                            margin: 0 10px;
                        }
                        span {
                            color: #fff;
                            strong {
                                display: block;
                                font-weight: bold;
                                font-size: 24px;
                                line-height: 1;
                            }
                            em {
                                line-height: 1;
                                display: block;
                                font-size: 20px;
                                b {
                                    color: #e3eb13;
                                }
                            }
                        }
                    }
                }
            }
        }
        .hd110 {
            width: 220px;
        }
    }
</style>